<!--
1. 使用钩子函数的第二个参数binding拿到传递的值
2. binding 是一个对象
    1. name 指令名称，不包括v-前缀
    2. value 指令的绑定值  如果 v-top="1+5" 那么 v-top 的value值为6
    3. oldValue
    4. expression 绑定值的字符串形式 如果 v-top="1+5" 那么 v-top 的expression 就是 1+5

3. 样式的设置可以在bind中进行
4. 私有指令
5. 自定义指令的简写形式


-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-color="'red'">
        <h3 v-font-weight="100">hello job</h3>
    </div>
    <script>
        Vue.directive('color',{
            bind:function (el,binding) {
                el.style.color=binding.value;
            },

        });
        var vm=new Vue({
            el:"#app",
            data:{

            },
            methods:{

            },
            directives:{
                'font-weight':function (el,binding) {
                    el.style.fontWeight=binding.value;
                }
            }
        })
    </script>

</body>
</html>